<template>
  <div class="order_detail">
    <header>
      <BaseNavBar title="订单详情" :is-nav="true" />
    </header>
    <main style="margin-top: 8px;">
      <Card>
        <section class="order_orders">
              <p class="order_no">订单编号：{{ orders?.orderNo }}</p>
              <p class="order_name">下单商家：{{ orders?.merchantName }}</p>
              <p class="order_num">套餐数量：{{ `x ${orders?.totalQty}` }}</p>
              <p class="order_price">总价格：{{ `¥ ${orders?.totalAmount}` }}</p>
              <p class="order_price" style="color:brown;" v-if="orders?.payAmount">支付价格：{{ `¥ ${orders?.payAmount}` }}</p>

              <p class="order_status">状态：
                <van-tag plain type="primary" v-if="orders?.status === 1">待支付</van-tag>
                <van-tag plain type="success" v-if="orders?.status === 2">已完成</van-tag>
                <van-tag plain type="danger" v-if="orders?.status === 3">已取消</van-tag>
              </p>
              <p class="order_num" >备注：{{ orders?.remark }}</p>
              <p class="order_time">下单时间：{{ orders?.createTime }}</p>
        </section>
      </Card>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { showToast } from 'vant';
import Card from '@/components/Card/index.vue';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import {getOrderDetail} from '@/apis/order';

const route = useRoute();
const orders = ref({});

const init = async () => {
  const { data = {}, msg, code } = await getOrderDetail(route.params?.id);
  if (code === 200) {
    orders.value = data;
    return;
  }
  showToast(msg);
};

onMounted(() => {
  init();
})

</script>

<style lang="less" scoped>

.order {
  &_no{
    font-size: 14px;
    color: #333;
  }
  &_name{
    margin-top: 4px;
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
  &_num{
    margin-top: 4px;
    font-size: 12px;
    color: #666;
  }
  &_price{
    margin-top: 4px;
    font-size: 14px;
    color: #f50;
  }
  &_time{
    margin-top: 4px;
    font-size: 12px;
    color: #999;
  }
  &_status{
    margin-top: 4px;
    font-size: 12px;
    color: #333;
  }
}

</style>
